import React, { useState } from 'react';
import PropTypes from 'prop-types';
Modal.propTypes = {
    title: PropTypes.string,
    visible: PropTypes.bool,
    onCancel: PropTypes.func.isRequired,
    onOk: PropTypes.func.isRequired
};
export default function Modal(props) {
    const [visible, setVisible] = useState(true);
    function onCancel() {
        setVisible(false);
        setTimeout(() => { props.onCancel() }, 300);
    }
    return (
        <div>
            <div className={`weui-mask ${visible ? 'weui-animate-fade-in' : 'weui-animate-fade-out'}`} />
            <div className={`weui-flex weui-felx-column weui-half-screen-dialog weui-picker ${visible ? 'weui-animate-slide-up' : 'weui-animate-slide-down'}`} style={{ flexDirection: 'column' }}>
                <div className="weui-half-screen-dialog__hd">
                    <div className="weui-half-screen-dialog__hd__main"><strong
                        className="weui-half-screen-dialog__title">{props.title}</strong>
                    </div>
                    <div className="weui-half-screen-dialog__hd__side" style={{ right: 5, color: '#C2C2C2' }}>
                        <span onClick={() => onCancel()} style={{ fontSize: 16 }}>取消</span>
                    </div>
                </div>
                <div className="weui-half-screen-dialog__bd">
                    {props.children}
                </div>
                <div className="weui-half-screen-dialog__ft">
                    <a className="weui-btn weui-btn_primary" onClick={() => props.onOk()}>确定</a>
                </div>
            </div>
        </div>
    )
}
